<template>
    <view
        class="flex-column gap-[20rpx] postCom"
        @click.stop="$jump('/views/subViews/post/postDetail/index?id=' + item.id)"
    >
        <view class="top-header flex-between">
            <view class="avatar-info flex-row-center gap-[10rpx]">
                <image :src="item.userAvatar || item.avatar" mode="aspectFill" />
                {{ item.userNickname || item.nickname }}
            </view>

            <view class="uncollect" v-if="type === 2" @click.stop="unFollowFn(item)">
                取消收藏
            </view>
        </view>

        <view class="body flex-row gap-[20rpx]">
            <view class="flex-1-0-0">
                <fui-overflow-hidden
                    size="26"
                    :text="item.content"
                    :rows="3"
                    color="#3D3D3D"
                ></fui-overflow-hidden>
            </view>
            <image
                v-if="item.pics && item.pics.length > 0"
                mode="aspectFill"
                :src="item.pics[0]"
            ></image>
        </view>

        <view class="footer flex-between">
            <view class="footer-left">
                {{
                    `${item.likeCount}赞 · ${item.followCount}收藏 · ${item.commentCount}评论`
                }}</view
            >
            <view class="share flex-row-center" @click.stop="shareFn(item)">
                <image mode="widthFix" :src="$getImg('/img/icon/home/fenxiang.png')"></image>
                分享
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { userActionAPI } from '@/api/common'
const props = defineProps(['item', 'type'])
const emit = defineEmits(['getList', 'share'])
const unFollowFn = async (item: any) => {
    const r = await uni.showModal({
        title: '取消收藏',
        content: '确定取消收藏该帖子吗？'
    })
    if (!r.confirm) return

    userActionAPI({
        action: '23',
        bindId: item.id,
        type: 2
    }).then((res) => {
        if (res.code === 0) {
            uni.showToast({
                title: '取消收藏成功',
                icon: 'none'
            })
            emit('getList')
        }
    })
}

const shareFn = (row: any) => {
    emit('share', row)
}
</script>

<style scoped lang="scss">
.top-header {
    .avatar-info {
        font-size: 13px;
        font-weight: 700;
        image {
            width: 50rpx;
            height: 50rpx;
            border-radius: 999rpx;
        }
    }

    .uncollect {
        border-radius: 999rpx;
        padding: 10rpx 20rpx;
        font-size: 12px;
        color: #bfbfbf;
        border: 1px solid #bfbfbf;
    }
}
.footer {
    font-size: 12px;
    color: #999999;
    .share {
        color: #3d3d3d;
        image {
            width: 40rpx;
            margin-right: 5rpx;
        }
    }
}

.body {
    image {
        width: 200rpx;
        height: 100rpx;
        border-radius: 10rpx;
    }
}
.postCom {
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
}
</style>
